/*
 * touch 이벤트 테스트.
 */
Ext.setup({
	tabletStartupScreen:"./tabletStartupScreen.png",
    phoneStartupScreen:"./phoneStartupScreen.png",
    tabletIcon:"./tabletIcon.png",
    phoneIcon:"./phoneIcon.png",
    glossOnIcon: true,
    statusBarStyle:"black",
    fullscreen:true,
    preloadImages:[],
    scope:this,
    onReady: function() {
        var MyComponent = Ext.extend(Ext.Component, {
            id: 'touchpad',
            flex:1,
            html: 'Touch here!',
            cls:"tempCls",
            initComponent : function() {             
                MyComponent.superclass.initComponent.call(this);
            },
            afterRender: function() {
                MyComponent.superclass.afterRender.call(this);
                // 이런식으로 이벤트를 설정하나 봅니다.
                // el에 직접 걸수도 있는데 이러면 너무 복잡한 느낌이 들기때문에
                // mon이라는 메소드를 사용하는것 같네요.
                // 참고로 레퍼런스에는 mon 메소드에 대해서 설명이 없네요.
                this.mon(this.el, {
                    touchstart: this.handleEvent,
                    touchend: this.handleEvent,
                    touchmove: this.handleEvent,
                    touchdown: this.handleEvent,
                    dragstart: this.handleEvent,
                    drag: this.handleEvent,
                    dragend: this.handleEvent,
                    singletap: this.handleEvent,
                    tap: this.handleEvent,
                    doubletap: this.handleEvent,
                    taphold: this.handleEvent,
                    tapcancel: this.handleEvent,
                    swipe: this.handleEvent,
                    pinch: this.handleEvent,
                    pinchstart: this.handleEvent,
                    pinchend: this.handleEvent,
                    scope: this
                });
            },
            handleEvent: function(e) {
                 this.fireEvent('log', e.type, e);
            }
        });
        // top dock menu
        var dockedItems = [{
            dock: 'top',
            xtype: 'toolbar',
            title:"Touch Events"
        }];
        var nCount = 0;
        // 터치 객체 만들기.
        var objMyTouch = new MyComponent();
        // log 이벤트 등록.
        objMyTouch.on("log", function(type,event) {  
            nCount++;      
            objLogger.body.first().insertFirst({
                    tag: 'p',
                    html: nCount + ", " + type,
                    style: 'margin: 0'
                });
            objLogger.body.select('p:nth-child(50)').remove();
        });
        // logger panel 생성하기.
        var objLogger = new Ext.Panel({
            id: 'logger',
            scroll: 'vertical',
            styleHtmlContent: true,
            height:400,
            bodyStyle:"border:1px #ff0000 solid",
            flex:1,
            dockedItems: [{
                dock: 'top',
                xtype: 'toolbar',
                title: 'Event Log',
                ui: 'light'
            }],
            html: '<span>Try using gestures on the area to the right to see how events are fired.</span>'
        });

       //  메인 패널 생성하기.
        var objPanel = new Ext.Panel({
            fullscreen: true,
            layout:{
                type:"hbox",
                align:"start"
            },
            dockedItems: dockedItems,
            scroll:{direction:"vertical"},
            items:[objLogger, objMyTouch               
            ]                      
        })     
    }
});